<template>
    <div class="page-child-main consumption2">
        <a-spin :class="loading&&'null-spin'" tip="Loading..." :spinning="loading">
            <div></div>
        </a-spin>
        <div class="page-title">消费来源统计</div>

        <div id="consumptionChart2"></div>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { echartLoad, toDecimalNoZero, toYuan } from "@/utils";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    loading = false;
    chart: any = null;
    maxData = 0;
    dataList: any[] = [];
    async mounted() {
        await this.getData();
        let max = 0;
        this.dataList.forEach((item) => {
            let val = Number(item.val);
            if (val > max) max = val;
        });
        this.maxData = Number(toDecimalNoZero(max + max * 0.4, 0));
        console.info(Number(toDecimalNoZero(this.maxData / 5, 0)),this.maxData)
        echartLoad(() => {
            this.setChart();
        });
    }
    async getData() {
        this.loading = true;
        try {
            const res = await api.getConsumptionSourceStatistics();
            this.dataList = res.data.sourceData.map((item) => {
                return { name: item.institutionType, val: toYuan(item.consumptionAmount) };
            });
        } finally {
            this.loading = false;
        }
    }

    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }

    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("consumptionChart2");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            grid: {
                top: 40,
                bottom: 50,
                left: 70,
                right: 75,
            },

            tooltip: {
                trigger: "axis",
            },
            xAxis: [
                {
                    name: "消费来源",
                    type: "category",
                    data: this.dataList.map((item) => item.name),
                    axisPointer: {
                        type: "shadow",
                    },
                },
            ],
            yAxis: [
                {
                    show: true,
                    type: "value",
                    name: "消费金额(元)",
                    min: 0,
                    max: this.maxData,
                    interval: Number(toDecimalNoZero(this.maxData / 5, 0)),
                },
            ],
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        const colorList = ["#2FD9A2", "#2196F4", "#F89E21", "#F66944", "#A07DEC", "#AC55EB", "#62C3FF"];
        const colorLen = colorList.length;
        return [
            {
                name: "消费金额",
                type: "bar",
                barWidth: "15",
                stack: "Ad",
                itemStyle: {
                    barBorderRadius: [4, 4, 0, 0],
                },
                label: {
                    show: true,
                    position: "top",
                    formatter: function (data) {
                        return Number(data.value).toLocaleString();
                    },
                },
                data: this.dataList.map((item, idx) => {
                    return {
                        value: item.val,
                        itemStyle: { color: colorList[idx % colorLen] },
                    };
                }),
            },
        ];
    }
}
</script>
<style lang="scss">
.consumption2 {
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    #consumptionChart2 {
        margin-top: 10px;
        flex-grow: 1;
        height: 50%;
        width: 100%;
    }
}
</style>
